<template>
  <div id="addMovie" style="width: 100%;height: calc(100vh - 40px);padding: 20px;overflow-y: auto">
    <el-form :model="albumForm">
      <div id="albumImg"><span v-if="!albumForm.albumImg">添加封面链接后显示</span><img v-if="albumForm.albumImg" :src="albumForm.albumImg" alt="" style="width: 100%;height: 100%"></div>
      <p>专辑名</p>
      <input type="text" v-model="albumForm.albumName" class="input-100">
      <p>专辑封面</p>
      <input type="text"  v-model="albumForm.albumImg" class="input-100">
    </el-form>
    <p>选择歌手</p>
    <el-select v-model="choseArtId" class="choseStyle" clearable  filterable placeholder="请选择">
      <el-option
        v-for="item in musicArtAll"
        :key="item.musicArtId"
        :label="item.musicArt"
        :value="item.musicArtId">{{item.musicArt}}<span style="font-size: 10px;opacity: 0.5;">·{{item.artMainMusic}}</span>
      </el-option>
    </el-select><br>
    <button class="button button-color-white" @click="addNewAlbum">添加专辑</button>
    <div class="cutLineHf"></div>
    <p>添加歌曲</p>
    <el-select v-model="choseAlbumId" class="choseStyle" clearable  filterable placeholder="请选择专辑">
      <el-option
        v-for="item in musicAlbumAll"
        :key="item.albumId"
        :label="item.albumName"
        :value="item.albumId+' '+item.musicArtId">{{item.albumName}}<span style="font-size: 10px;opacity: 0.5">·{{item.musicArt}}</span>
      </el-option>
    </el-select>
    <el-table
      :data="newMusic"
      style="width: 100%;margin-bottom: 10px;background-color: var(--theme-bgColor-aside-nav)">
      <el-table-column
        prop="musicName"
        label="歌名">
      </el-table-column>
      <el-table-column
        prop="musicNameEn"
        label="英文名">
      </el-table-column>
      <el-table-column
        prop="musicGen"
        label="类型">
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: space-between">
      <input type="text" id="musicName" class="input-30" placeholder="歌名">
      <input type="text" id="musicNameEn" class="input-30" placeholder="英文名">
      <input type="text" id="musicGen" class="input-30" placeholder="类型">
      <button class="button button-color-white" @click="pushNewMusic" style="margin-top: 0;width: 70px;height: 30px">添加</button>
    </div><br>
    <button class="button button-color-white" @click="addNewAlbumMusic">添加专辑所属歌曲</button>
  </div>
</template>

<script>
  import api from "../../model/api"
  import $ from "jquery"

  export default {
    data(){
      return{
        albumForm:{
          albumName: '',
          albumImg:'',
        },
        musicArtAll:[],
        choseArtId:'',
        choseAlbumId: '',
        newMusic:[],
        musicAlbumAll:[],
      }
    },
    watch:{
      choseArtId:function (val) {
        console.log(val)
      }
    },
    created() {
      this.getMusicArt()
      this.getAlbumAll()
    },
    methods:{
      async addNewAlbum(){
        const _musicArtId = this.choseArtId
        let newAlbum = {
          ...this.albumForm,
          musicArtId:_musicArtId
        }
        for(let key in newAlbum){
          if(newAlbum[key]){
            const {data:res} = await this.$axios.post('v1/addAlbum',newAlbum)
            if(res.code === 200){
              this.$message.success("添加成功")
              return true
            }
          }
        }
        this.$message.error("请填写完整")
      },
      getMusicArt(){
        api.getMusicArtAll().then(res => {
          this.musicArtAll = res.data
        })
      },
      getAlbumAll(){
        api.getMusicAlbumAll().then(res=>{
          this.musicAlbumAll = res.data
        })
      },
      async addNewAlbumMusic(){
        const readyPushMusic = this.newMusic
        const choseArr = this.choseAlbumId
        const pushMusic = choseArr.split(' ')
        readyPushMusic.map(list => {
          this.$set(list, 'musicArtId', pushMusic[1])
          this.$set(list, 'albumId', pushMusic[0])
        })
        for(let key in readyPushMusic){
          const {data:res} = await this.$axios.post('v1/addAlbumMusic',readyPushMusic[key])
        }
        this.$message.success("添加成功")
      },
      pushNewMusic(){
        const _addNewMusic = {
          musicName: $('#musicName').val(),
          musicNameEn: $('#musicNameEn').val(),
          musicGen: $('#musicGen').val()
        }
        for(let key in _addNewMusic){
          if(_addNewMusic[key]){
            this.newMusic.push(_addNewMusic)
            this.$message.success("添加成功")
            console.log(this.newMusic)
            return true
          }
        }
        this.$message.error("请填写完整")
      },
    }
  }
</script>

<style lang="less" scoped>
  #addMovie{
    background-color: var(--theme-bgColor-aside-nav);
    p{
      margin-bottom: 5px;
      color: var(--theme-fontMain);
    }
    input{
      margin-bottom: 20px;
      background-color: var(--theme-button);
      color: var(--theme-fontMain);
    }
    .choseStyle{
      margin-bottom: 20px;
    }
    button{
      margin-bottom: 20px;
    }
    #albumImg{
      width: 170px;
      height: 170px;
      background-color: var(--theme-button);
      margin-bottom: 20px;
      display: grid;
      place-items: center;
      color: var(--theme-fontMain);
      border-radius: 6px;
      overflow: hidden;
    }
  }

</style>
